import React, { useEffect, useState,useReducer } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Table,Space } from "antd";
import axios from "axios";
import StartStopModel from "./StartStopModel"
import getFields from "./getFields.js";
import FormCom from "../../../common/FormCom";
import PaginationCom from "../../../common/PaginationCom"
import "./index.css";

const initialState = {
  startStopModelStatus: false,
  operName:"",
  data:"",
  refresh:"",
  
};
const reducer = (state, action) => {
console.log("模态框传入",action);
  switch (action.type) {
    case 'changeStartStopModel':
      return {
        ...state,
        startStopModelStatus: action.status,
      };
      case 'changeOperName':
      return {
        ...state,
        operName: action.name,
      };
      case 'changeShopData':
        return {
          ...state,
          data: action.data,
        };
        case 'changeRefresh':
        return {
          ...state,
          refresh: action.refresh,
        };
        default:
  }
};
  /**选择每页多少条纪律的状态值 默认每页显示10条纪律*/
  let pageNum=10;
   /**选择第几页的状态值 默认显示第一页*/
  let pageIndex=1;
    /**设置条件规则状态 */
  let condition={};
export default function PoiManageList() {

  let navigation=useNavigate();
  const [form] = Form.useForm();
  const [data, setData] = useState([]);


    /**
   * 设置操作模态框
   */
  const [store, dispatch] = useReducer(reducer, initialState);
/**
 * 监听抽离的上下架状态 
 */
useEffect(()=>{
   　queryCui();
},[store.refresh]);

useEffect(()=>{
     setTimeout(function(){
    　queryCui();
    　　},1000);　　　　
},[store.refresh]);

/**
 * 拉去菜品信息列表
 * @returns 
 */
function queryCui(){
  axios({
    headers: {
      'tenantId':500,
      "userId":11111
  },
    method: 'post',
    url:'http://localhost:9101/product/search',
    data: {
       condition,
       "pageIndex":pageIndex,
       "pageSize":pageNum,
       "sortFields":[{"field":"enabled","asc":false},{"field":"created_at","asc":false},{"field":"last_modified_at","asc":false}],
    }

  }).then((data)=>{
   setData(data.data);
  })
}

  
/**
 * 构建查询 json串
 * @param values 
 */
function formatJSON(values){
  const condition={
    "enabled":values.enabled,
    "name":values.name,
    "unitPrice":{"from":values.from,"to":values.to},
    "unitOfMeasure":values.unitOfMeasure,
  }
  return condition;
}
  const onFinish = (values) => {
    condition=formatJSON(values)
    queryCui();
  };

  const columns = [
    {
      title: "状态",
      dataIndex: "enabled",
      render: (item)=>(
         item?<div className="stateDiv">以上架</div>:<div className="stateDiv">已下架</div>
      )
    },
    {
      title: "菜品名",
      dataIndex: "name",
    },
    {
      title: "菜品单价(元)",
      dataIndex: "unitPrice",
    },
    {
      title: "计量单位",
      dataIndex:  "unitOfMeasure",
    },
    {
      title: "操作",
      dataIndex: this,  
      render: (text) =>(
    
        <Space>
           <a onClick={()=>{
       navigation('/cui-manage/editCui',{state:text});
     }}> 
       编辑
       </a>
     {
       text.enabled?
        <a onClick={() =>{
          dispatch({type: 'changeStartStopModel',status: true})
          dispatch({type:'changeOperName',name:'stop'})
          dispatch({type: 'changeShopData',data:{'cuiId':text.id,'version':text.version}})
        }}>
         下架
         </a>
         : 
       <a onClick={() =>{
         dispatch({type: 'changeStartStopModel',status: true})
         dispatch({type:'changeOperName',name:'start'})
         dispatch({type: 'changeShopData',data:{'cuiId':text.id,'version':text.version}})
       }}>
       上架
       </a>
     }

        </Space>
    
      )
    }

    ];
    

  return (
    <div>

<FormCom onFinish={onFinish} 
          initialValues={{ businessTypeSer: "all",
          managementTypeSer: "all",
          enabledSer: "all",}}
          name="菜品List页面"
          getFields={getFields()}
          resetFields={()=>{
            condition={};
            queryCui();
            form.resetFields(); 
          }}
          />
    
      <Table pagination={false} dataSource={data.records} columns={columns} rowKey="id" />
      <PaginationCom
        totalCount={data.totalCount}
        pageNum={pageNum}
        changePageIndex={(num) => {
          console.log("改变pageIndex", num);
          pageIndex = num;
          queryCui();
        }}
        changePageNum={(num) => {
          console.log("改变pageNum", num);
          pageNum = num;
          queryCui();
        }}
      />
      <StartStopModel store={store} dispatch={dispatch}/>
    </div>
  );
}
